const { createApp,ref,onMounted} = Vue

createApp({
    setup() {
        const scrollToTop = (e) => {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if(headerCom.value){
                if(scrollTop == 0){
                    headerCom.value.removeAttribute('style')
                }
                else{
                    headerCom.value.setAttribute('style',`transform:translateY(${scrollTop}px);transition:.2s`)
                }
            }
        }
        onMounted(()=>{
            window.addEventListener('scroll', scrollToTop,false)
        })
        const query = ref({
            page_size: '20',
            white_black_state: '',
            domain_name: '',
            example_urls: '',
            domain_ips: '',
            domain_icp: '',
            domain_org: '',
            site_imgs: '',
            port_check: '',
            abroad_check: '',
            tx_check: '',
            pic_check: '',
            caution: ''
        })
        const list = ref([])
        const count = ref(0)
        const domain_State = ref(-2)
        const site = ref('')

        const apiPrefix = 'http://192.168.1.55:8080'
        const search = () => {
            const q = [];
            for (const k in query.value) {
                query.value[k] && q.push(k+'='+query.value[k]);
            }
            list.value = [];
            fetch(apiPrefix + '/admin/domain/list?'+q.join('&')).then(x=>x.json()).then(res=>{
                res.list.forEach(
                    data => {
                        if (data.example_urls){
                            data.exampleUrls = data.example_urls.split("\n")

                        }

                        if (data.site_imgs){
                            data.siteImgs = data.site_imgs.split("\n");
                            var pos = data.siteImgs.findIndex(x=>x.includes('#score='))
                            if(pos === -1){
                                pos = 0
                            }
                            data.siteImgsPos = pos;
                        }
                        data.checked = false;
                    }
                )
                list.value = res.list;
                count.value = res.count;
            });
        }
        search();

        const whiteBlackStyle = state => {
            switch (state) {
                case -2:
                    return 'color:red';
                case -1:
                    return 'color:orange';
            }
            return ''
        }


       

        const whiteBlackState = state => {
            switch (state) {
                case -2:
                    return '黑';
                case -1:
                    return '风险';
                case 1:
                    return '未知'
                case 2:
                    return '正常'
                case 3:
                    return '白'
                default:
                    return state
            }
        };

        const boolState = state => {
            switch (state) {
                case -1:
                    return '×'
                case 1:
                    return '√'
                default:
                    return state
            }
        };
        const checkState = state => {
            switch (state) {
                case -1:
                    return '-'
                case 1:
                    return '√'
                case 2:
                    return '×'
                default:
                    return state
            }
        }

        const timeTrim = t =>{
            return t?t.replace(/[TZ]/g, ' ').replace('+08:00',''):''
        }
        const del = item => {
            fetch(apiPrefix + '/admin/domain/del?domainName='+item.domain_name, {method:'post'}).then(r=>r.json()).then(r=>{
                if(r.err){
                    return alert(r.err)
                }
                item.delete_state = 1
                search()
            })
        }

        const change = (item, newState) => {
            fetch(apiPrefix + '/admin/domain/change?domainName='+item.domain_name + '&tp='+newState, {method:'post'}).then(r=>r.json()).then(r=>{
                if(r.err){
                    return alert(r.err)
                }
                search()
            })
        }

        const add = (tp) => {
            fetch(apiPrefix + '/admin/domain/add?site=' + encodeURIComponent(site.value) + '&tp='+tp, {method:'post'}).then(r=>r.json()).then(r=>{
                if(r.err){
                    return alert(r.err)
                }
                site.value='';
                search()
            })
        }
        
        const headerCom = ref(null)

        const showModal = ref(false)

        const handlerModalCancel = () => {
            showModal.value = false;
            actionModalShow.value = false;
            domain_State.value = -2;
            site.value = ""
        }
        const handlerModalConfirm = (type) => {
            switch(type){
                case 'add':
                    if(site.value == ""){
                        showGlobalMsg('域名地址不能为空')
                        return;
                    }
                    add(domain_State.value);
                    showModal.value = false;
                    domain_State.value = -2;

                break;
                case 'edit':
                    console.log(actionType.value)
                    if(actionType.value == 0){
                        globalConfirmMsg.value = '确认删除吗?'
                    }
                    else{
                        globalConfirmMsg.value = '确认操作吗?'
                    }
                    globalConfirmShow.value = true;
                break;
                default:
                break;
            }
        }
        const chooseList = ref([])
        const setList = (item) => {
            if(item.checked){
                chooseList.value.push(item)
            }
            else{
                const isIndex =  chooseList.value.findIndex(t => item.id == t.id)
                if(isIndex != -1){
                    chooseList.value.splice(isIndex,1)
                }
            }
        }

        const globalMsg = ref('')

        
        const showGlobalMsg = (msg) => {
            globalMsg.value = msg;
            setTimeout(() => {
                globalMsg.value = ""
            }, 2000);
        }
        const handlerCancel = () => {
            globalConfirmShow.value = false;
        }
        const handlerConfirm = () => {
            switch(actionType.value){
                case 0:
                    chooseList.value.forEach(item=>{
                        del(item)
                    })
                break;
                default:
                    chooseList.value.forEach(item=>{
                        change(item,actionType.value)
                    })
                break;
            }
            globalConfirmShow.value = false;
            actionModalShow.value = false;
            chooseList.value = []

        }
        const globalConfirmShow = ref(false)

        const actionType = ref(0)
        const actionModalShow = ref(false)
        const globalConfirmMsg = ref('确认删除吗')
        return {
            query,
            count,
            site,
            list,
            search,
            whiteBlackStyle,
            whiteBlackState,
            boolState,
            checkState,
            timeTrim,
            del,
            change,
            add,
            domain_State,
            chooseList,
            setList,
            actionType,
            showModal,
            headerCom,
            handlerModalCancel,
            handlerModalConfirm,
            handlerCancel,
            handlerConfirm,
            globalConfirmMsg,
            globalConfirmShow,
            actionModalShow,
            globalMsg,
        }
    }
}).mount('#app')

const oDom = {
    APP : document.getElementById('app'),
    HEADER : document.getElementById('header'),
    CONTENT : document.getElementById('content'),
}


function init(){
    let { height } = oDom.HEADER.getBoundingClientRect();
    oDom.CONTENT.style.height = window.innerHeight - height + 'px'
}
init()

window.onresize = () => {
    init()
}